<template>
    <div>
        <div class="iconContentNav">
            <section class="contentNavLeft">
                <div class="IconTitle" style="width: 64px;color: #4d2be2;font-weight: 700;border-bottom: 1px solid #4d2be2">系统看板</div>
                <div style="margin-left: 20px;border-left: 1px solid #999;padding-left: 20px">
                    按模板查看：
                    <el-select v-model="ruleForm.template" placeholder="请选择模板" style="border-color: black">
                    <el-option label="系统数据看板模板（默认）" value="defaultTemplate"></el-option>
                    <el-option label="shanghai" value="shanghai"></el-option>
                    <el-option label="beijing" value="beijing"></el-option>
                </el-select>
                </div>
            </section>
            <section class="contentNavRight">
                <el-button type="primary"
                           class="quickReporting"
                           @click="toQuickReporting"
                >生成快速报告</el-button>
                <QuickReportingModal
                        :dialogVisible = dialogVisible
                        :ruleForm = ruleForm
                ></QuickReportingModal>
                <el-button type="primary" class="htmlModal">创建HTML模板</el-button>
            </section>
        </div>
    </div>
</template>

<script>
    import QuickReportingModal from "./IconContent/QuickReportingModal";

    export default {
        name: "IconContent",
        components:{
            QuickReportingModal
        },
        data(){
            return {
                dialogVisible:{
                    outerVisible: false,

                },
                ruleForm:{
                    project:'奔驰',//所属项目
                    name: '',//报告名称
                    template: '',//模板
                    reportType:'',//报告类型
                    reportDate:'',//报告日期
                    startData: '',
                    endDate: '',
                }
            };
        },
        methods:{
            toQuickReporting(){
                this.dialogVisible.outerVisible = true
                let nowTime = new Date()
                this.ruleForm.reportDate = nowTime//报告日期
                this.ruleForm.template = "defaultTemplate"//报告模板
                this.ruleForm.reportType = "day"//报告类型
                this.ruleForm.name = this.ruleForm.project + '在线报告 ' + '(' +
                    `${this.ruleForm.reportType == 'day' ? '日报' : this.ruleForm.reportType == 'month' ? '月报': this.ruleForm.reportType == 'year' ? '年报' : ''}`
                    + ') ' + this.formatDateTime(this.ruleForm.reportDate)
                this.ruleForm.startData = nowTime//数据范围开始事件
                this.ruleForm.endDate = nowTime//税局范围结束时间
                console.log(this.ruleForm)
            },
            formatDateTime(date) { //之间转换格式
                let y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y +  m +  d
            }
        }
    }
</script>

<style scoped>
    .iconContentNav{
        display: flex;
        flex-wrap: wrap;
    }
    .contentNavLeft{
        text-align: left;
        /*width: 60%;*/
        flex-grow: 1;
        display: flex;
    }

    .contentNavRight{
        text-align: left;
        width: 200px
    }
    .quickReporting{
        margin-right: 10px;
    }
    .quickReporting,
    .htmlModal{
        box-sizing: border-box;
        padding: 0;
        font-size: 12px;
        line-height: 26px;
        width: 90px;
        height: 26px;
        border: none;
        background-color: purple!important;
    }
    .quickReporting:hover,
    .htmlModal:hover{
        background-color: #ad04ad!important;
    }
    .quickReporting:visited,
    .htmlModal:visited{
        background-color: purple!important;

    }
</style>